import 'package:architecture/os_size.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../generated/assets.dart';
import '../../widgets/drop_down_text.dart';
import 'card_flip_controller.dart';

class FlipCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetX(
        init: CardFlipController(),
        builder: (controller) {
          return Scaffold(
              appBar: AppBar(title: Text('卡片翻转效果')),
              body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    _type(controller),
                    _direction(controller),
                    DropDownText(
                      width: 210,
                      height: 45,
                      msg: controller.effect.value,
                      list: controller.effects.keys.toList(),
                      dialogItemHeight: 45,
                      onPressed: (value) {
                        controller.changeEffect(value);
                      },
                    ),
                    SizedBox(height: 15),
                    GestureDetector(
                        onTap: controller.flipCard,
                        child: AnimatedBuilder(
                          animation: controller.animation,
                          builder: (context, child) {
                            final angle = controller.animation.value;
                            return Transform(
                              transform: Matrix4.identity()
                                ..setEntry(3, 2, 0.001) // 添加透视效果
                                ..rotateY(angle), // 使用动态旋转角度
                              alignment: Alignment.center,
                              child: Stack(
                                children: [
                                  _buildFrontCard(angle, controller),
                                  _buildBackCard(angle, controller),
                                ],
                              ),
                            );
                          },
                        )),
                  ],
                ),
              ));
        });
  }

  _type(CardFlipController controller) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
            width: windowWidth * 0.1,
            height: 50,
            child: RadioListTile<int>(
                title: const Text('卡片'),
                value: 0,
                groupValue: controller.type.value,
                onChanged: (int? newValue) {
                  controller.changeType(newValue!);
                })),
        Container(
            width: windowWidth * 0.1,
            height: 50,
            child: RadioListTile<int>(
                title: const Text('图片'),
                value: 1,
                groupValue: controller.type.value,
                onChanged: (int? newValue) {
                  controller.changeType(newValue!);
                })),
      ],
    );
  }

  _direction(CardFlipController controller) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
            width: windowWidth * 0.1,
            height: 50,
            child: RadioListTile<int>(
                title: const Text('正向'),
                value: 0,
                groupValue: controller.direction.value,
                onChanged: (int? newValue) {
                  controller.changeDirection(newValue!);
                })),
        Container(
            width: windowWidth * 0.1,
            height: 50,
            child: RadioListTile<int>(
                title: const Text('反向'),
                value: 1,
                groupValue: controller.direction.value,
                onChanged: (int? newValue) {
                  controller.changeDirection(newValue!);
                })),
      ],
    );
  }

  Widget _buildFrontCard(double angle, CardFlipController controller) {
    double a = controller.direction.value == 0 ? 3.14159 : -3.14159;
    // 动态调整正面卡片文字的旋转方向
    bool isVisible = angle <= a / 2 || angle >= a * 1.5;

    if (controller.direction.value == 1) {
      isVisible = angle > a / 2 || angle < a * 1.5;
    }

    return Transform(
      transform: Matrix4.identity()..rotateY(isVisible ? 0 : a),
      alignment: Alignment.center,
      child: controller.type.value == 0
          ? _buildCardContent('福卡正面', Colors.blue, isVisible)
          : _image1(isVisible),
    );
  }

  _image1(bool isVisible) {
    return Opacity(
        opacity: isVisible ? 1 : 0,
        child: Container(
          height: 300,
          alignment: Alignment.center,
          child: Image.asset(
            Assets.imagesRole1,
            width: 200,
          ),
        ));
  }

  _image2(bool isVisible) {
    return Opacity(
      opacity: isVisible ? 1 : 0,
      child: Container(
          height: 300,
          alignment: Alignment.center,
          child: Image.asset(
            Assets.imagesRole2,
            width: 200,
          )),
    );
  }

  _buildBackCard(double angle, CardFlipController controller) {
    double a = controller.direction.value == 0 ? 3.14159 : -3.14159;
    // 动态调整背面卡片文字的旋转方向
    bool isVisible = angle > a / 2 && angle < a * 1.5;

    if (controller.direction.value == 1) {
      isVisible = angle < a / 2 && angle > a * 1.5;
    }

    return Transform(
      transform: Matrix4.identity()..rotateY(isVisible ? a : 0),
      alignment: Alignment.center,
      child: controller.type.value == 0
          ? _buildCardContent('福卡反面', Colors.red, isVisible)
          : _image2(isVisible),
    );
  }

  _buildCardContent(String text, Color color, bool isVisible) {
    return Opacity(
      opacity: isVisible ? 1 : 0, // 文字显示或隐藏
      child: Container(
        width: 210,
        height: 300,
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(12),
        ),
        alignment: Alignment.center,
        child: Text(
          text,
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }
}
